<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>聊天室</title>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
	<p>聊天室</p>
	<form id="aricForm">
		<textarea rows="4" cols="60" name="text"></textarea>
		<input type="submit" />
	</form>
	<div id="output"></div>
</body>
<script type="text/javascript">
	$("#aricForm").submit(function(e) {
		e.preventDefault();
		var text = $("#aricForm").find('textarea[name="text"]').val();
		sendSpittle(text);
	});

	var sock = new SockJS("/endpointChat");//连接endpoint名为"endpointChat"的endpoint
	var stomp = Stomp.over(sock);
	stomp.connect('guest', 'guest', function(frame) {
		//订阅/user/queue/notifications发送的消息,这里与在simpMessagingTemplate.convertAndSendToUser定义地址一致,/user是必须的
		stomp.subscribe("/user/queue/notifications", handleNotification);
	});

	function handleNotification(message) {
		$("#output").append("<b>Received: " + message.body + "</b><br/>");
	}

	function sendSpittle(text) {
		stomp.send("/app/chat", {}, text);
	}

	$("#stop").click(function() {
		sock.close();
	});
</script>
</html>